<template>
  <div class="popup-music-list">
    <van-popup
      position="bottom"
      :style="{ height: '50%' }"
      v-model:show="show"
      teleport="#app"
      round
    >
      <!-- 给通用的播放列表组件传入歌单和切换歌曲的函数 -->
      <MusicList :playList="playList" :changeMusic="changeMusic"></MusicList>
    </van-popup>
  </div>
</template>

<script>
import MusicList from './MusicList.vue'
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  name: 'PopupMusicList',
  props: ['playList'],
  setup(props) {
    const store = useStore()
    // 底部音乐栏 / 音乐详情，歌单按钮是否显示状态
    const show = computed({
      get() {
        return store.state.popupMusicList
      },
      set() {
        store.commit('popupMusicListState', false)
      }
    })
    // 点击切换当前歌单的歌曲/清除旧歌曲歌词对应的时间
    const changeMusic = (index) => {
      store.commit('playListIndexChange', index)
      store.dispatch('getMusicUrl', props.playList[index].id)
      store.commit('setcurrentMusicLyricPosition', 0)
    }
    return {
      show,
      changeMusic
    }
  },
  components: { MusicList }
}
</script>

<style lang="less" scoped>
.van-popup {
  .item-body {
    width: 100%;
    padding: 0 0.2rem;
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 1.5rem;
      padding: 0.2rem 0rem;
      .item-left {
        flex: 1;
        display: flex;
        align-items: center;
        .index {
          font-size: 0.3rem;
        }
        .song {
          display: flex;
          flex-direction: column;
          margin-left: 0.4rem;
          .name {
            font-weight: 600;
            margin-bottom: 0.1rem;
          }
          .singers {
            .singer {
              color: #bbb;
              font-size: 0.24rem;
            }
          }
        }
      }
      .item-right {
        display: flex;
        justify-content: flex-end;
        width: 1.2rem;
        font-size: 0.5rem;
        color: #bbb;
        .mv {
          margin-right: 0.2rem;
        }
      }
    }
  }
}
</style>
